import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'


Vue.use(Vuex)

/* 
  vuex是最好非父子传参方式,
  vue的状态存储说的是vuex
*/
// vuex刷新数据会重置 ， 无法持久化
// 1.下载持久化插件 npm i vuex-persistedstate
//2.引入持久化插件
import createPersistedState from "vuex-persistedstate"
export default new Vuex.Store({
  //存储公共状态或者公共数据
  state: {
    count:0,
    hi:"hello"
  },
  //相当于计算属性
  getters: {
    num(state, ){
      return state.count + 10
    }
  },
  //用来处理同步数据,修改state里的值
  mutations: {
    // 接收两个参数 一个state 一个传参
    CHANGE_COUNT(state, params){
      state.count += params
    }
  },
  // 用来处理异步数据(调接口)
  actions: {
    // 两个参数 1.context 里面有自带的方法 2.传参
    handleChange(context, params){
      console.log(context,params)
      // 通过context.commit 去触发Mutations里的方法
      context.commit("CHANGE_COUNT",params)
    },
    // context = {commit: f, dispatgh:f} ={commit}
    change({commit},data){
      commit("CHANGE_COUNT",2)
    }
  },
  // 子模块
  modules: {
    user
  },
  // 配置持久化插件
  plugins:[
 createPersistedState({
      //默认会存到localStorage
      storage: localStorage,
      // 存储的key名
      key: "mykey",
      // 存储指定变量
      paths:["count"]
    })
  ]
   
  
})
